<!-- 最新市场头条 -->
<template>
  <div class="component component--layout layout--D4">

    <div class="column column--primary">
      <div class="element element--article BarronsOnline" v-for="(item, index) in lastMarkData" :key="index">
        <figure class="article__figure">
          <router-link class="figure__image"
            :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
            <img class="lazyautosizes lazyloaded" :src="item.imgUrl" v-if="item.imgUrl">
            <img src="../../../assets/detail-noImg.png" v-else>
          </router-link>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <router-link class="link" :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
              {{ item.title }}
            </router-link>
          </h3>
          <p class="article__summary">{{ item.summary }}</p>
          <div class="content--secondary" v-if="item.company">
            <div class="group group--tickers">
              <bg-quote :class="[lastMarkData < 0 ? 'negative' : 'positive']" @mouseover="showTooltip(i)"
                @mouseout="hideTooltip" v-if="item.ticketChange">
                <router-link class="ticker" :to="{ name: 'stockDetail', params: { symbol: item.company } }">
                  <span class="ticker__symbol">{{ item.company }}</span>
                  <bg-quote :class="[item.ticketChange < 0 ? 'negative' : 'positive']">{{ item.ticketChange
                    }}</bg-quote>
                  <i class="icon"></i>
                  <!-- <hoverEffect :hoverData="hoverData" v-if="i === showIndex"></hoverEffect> -->
                </router-link>
              </bg-quote>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column column--aside">
      <div class="element element--article" v-for="(item, index) in lastMarkData1" :key="index">
        <figure class="article__figure">
          <router-link class="figure__image"
            :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
            <img class="lazyautosizes" sizes="300px" :src="item.imgUrl" v-if="item.imgUrl">
            <img v-else src="../../../assets/noimg.png" />
          </router-link>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <router-link class="link" :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
              {{ item.title }}
            </router-link>
          </h3>
          <div class="content--secondary" v-if="item.company">
            <div class="group group--tickers">
              <bg-quote :class="[lastMarkData1 < 0 ? 'negative' : 'positive']">
                <router-link class="ticker" :to="{ name: 'stockDetail', params: { symbol: item.company } }"
                  @mouseover="showTooltip1(i, idx)" @mouseout="hideTooltip1">
                  <span class="ticker__symbol">{{ item.company }}</span>
                  <bg-quote :class="[item.ticketChange < 0 ? 'negative' : 'positive']">{{ item.ticketChange
                    }}</bg-quote>
                  <i class="icon" v-if="item.ticketChange"></i>
                  <!-- <hoverEffect :hoverData="hoverData" v-if="i === showpareneIndex && showchildIndex === idx">
                  </hoverEffect> -->
                </router-link>
              </bg-quote>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { usemkDataArrays } from '../../../api/market';
import hoverEffect from '../../../components/hoverEffect/hoverEffect.vue';
const { hoverData } = usemkDataArrays()
const props = defineProps(['lastMarketData'])
let lastMarkData = ref([props.lastMarketData[0]])
let lastMarkData1 = ref([props.lastMarketData[1], props.lastMarketData[2]])
const showIndex = ref(-1)
const showTooltip = (i) => {
  showIndex.value = i
}
const hideTooltip = () => {
  showIndex.value = -1
}
const showpareneIndex = ref(-1)
const showchildIndex = ref(-1)
const showTooltip1 = (i, idx) => {
  showpareneIndex.value = i
  showchildIndex.value = idx
}
const hideTooltip1 = () => {
  showpareneIndex.value = -1
  showchildIndex.value = -1
}
</script>

<style scoped lang='scss'>
.column--aside .element--article:first-child {
  .article__content {
    position: static;
  }
}

.component {
  max-width: 960px;
}

.ticker {
  cursor: pointer;
  position: relative;
}

.element--article .group--tickers {
  overflow: inherit
}
</style>